<template>
  <div class="wrapper">
    <div style="height: 300px;"></div>
    <div class="input-wrapper">
      <i class="el-icon-user icon"></i>
      <input placeholder="请输入用户名" v-model="user.username">
    </div>
    <div class="input-wrapper">
      <i class="el-icon-key icon"></i>
      <input type="password" placeholder="请输入密码" v-model="user.password">
    </div>
    <el-button type="primary" round style="width: 275px; background-color: #E7FAFF; color: #006A96;" @click="login">登录</el-button>
  </div>
</template>

<script>
  import {
    mapMutations
  } from 'vuex';

  export default {
    data() {
      return {
        user: {
          username: '',
          password: '',
          token: '123141124'
        }
      }
    },
    methods: {
      ...mapMutations(['setUser']),
      login() {
        this.user.routers = [{
          path: '/home',
          name: 'home',
          meta: {
            name: '首页',
            icon: 'el-icon-s-home',
            activeMenu: '/home'
          },
          component: 'home'
        }, {
          path: '/userManage',
          name: 'userManage',
          meta: {
            name: '用户管理',
            icon: 'el-icon-s-home',
            activeMenu: '/userManage'
          },
          component: 'userManage',
        }]
        this.setUser(this.user);
        this.$router.push('/');
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#195A9E, #42CDA3);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFFFFF;

    .input-wrapper {
      border: 1px solid #ffffff;
      border-radius: 30px;
      padding: 0 20px;
      margin-bottom: 30px;

      .icon {
        margin-right: 10px;
      }
    }
  }

  input {
    border: none;
    width: 200px;
    height: 40px;
    background-color: transparent;
    font-size: 16px;
    color: #ffffff;
  }

  input:focus {
    outline: none;
  }

  input::-webkit-input-placeholder {
    color: rgba($color: #FFFFFF, $alpha: 0.5);
  }
</style>
